<template>
  <div>
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="id"
        v-show="false"
      >
        <a-input
          placeholder="id"
          v-decorator="[
            'id',
            {rules: [{ required: false, message: '' }]}
          ]"
          :disabled="true"
        ></a-input>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="登录名"
        hasFeedback
        help="请填写登录名"
      >
        <a-input :min="1" :max="20" style="width: 100%" v-decorator="['code', {rules: [{ required: true }]}]" />
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="姓名"
        hasFeedback
        help="请填写姓名"
      >
        <a-input :min="2" :max="20" style="width: 100%" v-decorator="['name', {rules: [{ required: true }]}]" />
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="密码"
        hasFeedback
        help="请填写密码"
        v-show="showPws"
      >
        <a-input :min="6" :max="20" style="width: 100%" v-decorator="['password', {rules: [{ required: this.showPws }]}]" />
      </a-form-item>

      <a-row>
        <a-col span="6">
          <a-button type="primary" html-type="submit">提交</a-button>
        </a-col>
        <a-col span="10">
          <a-button @click="handleGoBack">返回</a-button>
        </a-col>
        <a-col span="8"></a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import moment from 'moment'
import pick from 'lodash.pick'
import md5 from 'md5'
import { editUser } from '@/api/user'

export default {
  name: 'TableEdit',
  props: {
    record: {
      type: [Object, String],
      default: ''
    }
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      buttonCol: {
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12, offset: 5 }
        }
      },
      form: this.$form.createForm(this),
      id: 0,
      showPws: true
    }
  },
  // beforeCreate () {
  //   this.form = this.$form.createForm(this)
  // },
  mounted () {
    this.$nextTick(() => {
      this.loadEditInfo(this.record)
    })
  },
  methods: {
    handleGoBack () {
      this.$emit('onGoBack')
    },
    handleSubmit (e) {
      e.preventDefault()
      const { form: { validateFields } } = this
      validateFields((err, values) => {
        if (!err) {
          // eslint-disable-next-line no-console
          console.log('Received values of form: ', values)
          // 保存
          if (this.showPws) {
            // 新增用户将密码md5
            values.password = md5(values.password)
          }
          editUser(values).then(res => {
            this.$message.info('保存成功')
            this.handleGoBack()
          }).catch(err => {
            this.$message.error(err.response.data.message)
          })
        }
      })
    },
    handleGetInfo () {

    },
    loadEditInfo (data) {
      if (data.id != null) {
        this.showPws = false
      }
      const { form } = this
      // ajax
      console.log(`将加载 ${this.id} 信息到表单`)
      new Promise((resolve) => {
        setTimeout(resolve, 10)
      }).then(() => {
        const formData = pick(data, ['id', 'code', 'name'])
        formData.updatedAt = moment(data.updatedAt)
        console.log('formData', formData)
        form.setFieldsValue(formData)
      })
    }
  }
}
</script>
